<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Using &lt;symbol&gt;</title>
  <link rel="stylesheet" type="text/css" href="../svg_style.css">
  <script type="text/javascript" src="../svg_utils.js"></script>
</head>

<body onload="init();">

<div id="svgInput">
<div class="editable"><pre id="svgSource" contenteditable="true"></pre></div>
<div id="svgOriginal">&lt;svg width="200px" height="200px" viewBox="0 0 200 200"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
&lt;title&gt;Symbols versus groups&lt;/title&gt;
&lt;desc&gt;Use of symbols (which can have aspect ratio) versus
groups (which don't)&lt;/desc&gt;

&lt;defs&gt;
&lt;g id="octagon" style="stroke: black;"&gt;
    &lt;desc&gt;Octagon as group&lt;/desc&gt;
    &lt;polygon points="
        36 25, 25 36, 11 36, 0 25,
        0 11, 11 0, 25 0, 36 11"/&gt;
&lt;/g&gt;

&lt;symbol id="sym-octagon" style="stroke: black;"
   preserveAspectRatio="xMidYMid slice" viewBox="0 0 40 40"&gt;
    &lt;desc&gt;Octagon as symbol&lt;/desc&gt;
    &lt;polygon points="
        36 25, 25 36, 11 36, 0 25,
        0 11, 11 0, 25 0, 36 11"/&gt;
&lt;/symbol&gt;
&lt;/defs&gt;

&lt;g style="fill:none; stroke:gray"&gt;
  &lt;rect x="40" y="40" width="30" height="30"/&gt;
  &lt;rect x="80" y="40" width="40" height="60"/&gt;
  &lt;rect x="40" y="110" width="30" height="30"/&gt;
  &lt;rect x="80" y="110" width="40" height="60"/&gt;
&lt;/g&gt;
&lt;use xlink:href="#octagon" x="40" y="40" width="30" height="30"
  style="fill: #c00;"/&gt;
&lt;use xlink:href="#octagon" x="80" y="40" width="40" height="60"
  style="fill: #cc0;"/&gt;
&lt;use xlink:href="#sym-octagon" x="40" y="110" width="30" height="30"
    style="fill: #cfc;"/&gt;
&lt;use xlink:href="#sym-octagon" x="80" y="110" width="40" height="60"
    style="fill: #699;"/&gt;
&lt;/svg&gt;</div>
<div id="svgError"></div>
<div>
  <input type="button" value="Refresh" onclick="refresh();"/>
  <input type="button" value="Reset" onclick="reset();"/>
  <input type="checkbox" id="svgShowError" /> <!--Show SVG Errors-->
</div>
</div> <!-- svgInput-->

<div id="svgOutput">
  <svg width="200" height="200" viewBox="0 0 200 200">
    <g id="svgMarkup"></g>
  </svg>
</div>

</body>
</html>
